<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="icon" href="./img/asset-favicon.ico">
		<title>社交-交友</title>

		<!-- 页面 css js -->
		<!-- <script type="text/javascript" src="../../plugins/sui/sui.min.js"></script> -->
		<!-- <script type="text/javascript" src="./chat.js"></script> -->

		<link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
		<link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
		<link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
		<link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
		<link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
		<link rel="stylesheet" type="text/css" href="./css/page-sj-makeFriends-talk.css" />
	</head>

	<body>
		<!--引用组件-->
		<div class="wrapper">
			<!--头部导航-->
			<header>
				<div class="sui-navbar">
					<div class="navbar-inner">
						<a href="index-logined.html" class="sui-brand"><img src="./img/asset-logo-black.png" alt="社交" /></a>
						<ul class="sui-nav">
							<li class="active">
								<a href="./headline-logined.html">头条</a>
							</li>
							<li>
								<a href="./qa-logined.html">问答</a>
							</li>
							<li>
								<a href="./activity-index.html">活动</a>
							</li>
							<li>
								<a href="./makeFriends-index.html">交友</a>
							</li>
							<li>
								<a href="./spit-index.html">吐槽</a>
							</li>
							<li>
								<a href="./recruit-index.html">招聘</a>
							</li>
						</ul>
						<form class="sui-form sui-form pull-left">
							<input type="text" placeholder="输入关键词...">
							<span class="btn-search fa fa-search"></span>
						</form>
						<div class="sui-nav pull-right info">
							<li>
								<a href="./other-notice.html" target="_blank" class="notice">通知</a>
							</li>
							<li class="hover">
								<span class="fa fa-plus "></span>
								<ul class="hoverinfo">
									<li><i class="fa fa-share-alt" aria-hidden="true"></i>
										<a href="./headline-submit.html">去分享</a>
									</li>
									<li><i class="fa fa-question-circle" aria-hidden="true"></i>
										<a href="./qa-submit.html" target="_blank">提问题</a>
									</li>
									<li><i class="fa fa-comments" aria-hidden="true"></i>
										<a href="./spit-submit.html" target="_blank">去吐槽</a>
									</li>
									<li><i class="fa fa-heartbeat" aria-hidden="true"></i>
										<a href="./makeFriends-submit.html" target="_blank">发约会</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="./person-homepage.html" target="_blank" class="homego"><img src="./img/widget-photo.png" alt="用户头像"></a>
							</li>
						</div>
					</div>
				</div>

			</header>

		</div>
		<div class="banner">
			<div class="wrapper">
				<img src="./img/page-banner.png" alt="">
			</div>

		</div>
		<!--两列布局-->
		<div class="wrapper tag-item">
			<div class="fl left-list">
				<div class="friend-chat">
					<h4>您正在和毕鹏聊天</h4>
					<div class="chat-bg">
						<div class="chat-box">
							<!-- <span class="chat-trip">此刻对方忙碌，请留言</span> -->
							<div class="bubbleDiv">
								<div class="talk-content">
									<div class="talk-left">
										<div class="img">
											<img src="img/asset-photo.png"/>
										</div>
										
										<div class="text">
											<p class="info">
												<span class="name">姓名</span>
												<span class="time">时间</span>
											</p>
										
											<p class="word"><em></em> 主要内容主要内容主要内容</p>
										</div>
									</div>
									<div class="talk-rit">
										<div class="text">
											<p class="info">
												<span class="name">姓名</span>
												<span class="time">时间</span>
											</p>
											<p class="word">
												<em></em> 
												主要内容主主要内容主要内容主要内容要内容主要内容
												
											</p>
										</div>
										<div class="img">
											<img src="img/asset-photo.png"/>
										</div>
										
									</div>
									<div class="talk-left">
										<div class="img">
											<img src="img/asset-photo.png"/>
										</div>
										
										<div class="text">
											<p class="info">
												<span class="name">姓名</span>
												<span class="time">时间</span>
											</p>
										
											<p class="word"><em></em> 主要内容主要内容主要内容</p>
										</div>
									</div>
									<div class="talk-rit">
										<div class="text">
											<p class="info">
												<span class="name">姓名</span>
												<span class="time">时间</span>
											</p>
											<p class="word">
												<em></em> 
												主要内容主主要内容主要内容主要内容要内容主要内容
												
											</p>
										</div>
										<div class="img">
											<img src="img/asset-photo.png"/>
										</div>
										
									</div>
									
								</div>
							</div>
						</div>
						<div class="chat-edit clearfix">
							<p class="chat-info" placeholder="想咨询他什么内容..." contenteditable="true"></p>
							<button class="send-btn fr">发送</button>
						</div>
					</div>
				</div>
			</div>
			<div class="fl right-tag">
				<div class="friend-info-card">
					<div class="card">
						<div class="photo-name">
							<img src="./img/widget-photo.png" alt="">
							<div class="name-edit">
								<p><span class="name">用户名</span> <span class="edit">编辑兴趣资料</span></p>
								<p>认证</p>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="like">
							<span class="like1">喜欢　<i class="num">400</i></span>
							<span>被喜欢　<i class="num">5</i></span>
						</div>
					</div>
				</div>
				<div class="block-btn">
					<p>约一约有趣的人，会一会好的时光！</p>
					<a class="sui-btn btn-block btn-share" href="./makeFriends-submit.html" target="_blank">发布约会</a>
				</div>
				<div class="rank">
					<div class="head">
						<h3 class="title">排行榜</h3>
					</div>
					<div class="rank-list">
						<ul class="rank">
							<li>
								<span class="fl dating">喝咖啡</span>
								<span class="fr cafe">102258</span>
							</li>
							<li>
								<span class="fl dating">吃饭</span>
								<span class="fr eat">9878</span>
							</li>
							<li>
								<span class="fl dating">看电影</span>
								<span class="fr movie">2564</span>
							</li>
							<li>
								<span class="fl dating">旅行</span>
								<span class="fr travel">897</span>
							</li>
						</ul>

					</div>
				</div>
				<div class="friend-line-card">
					<div class="card">
						<p>找个合适的参加一场线下活动</p>
					</div>
				</div>
				<div class="friend-line-card">
					<div class="card">
						<p>找个合适的参加一场线下活动</p>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="footer">
			<div class="wrapper">
				<div class="footer-bottom">
					<div class="link">
						<dl>
							<dt>网站相关</dt>
							<dd>关于我们</dd>
							<dd>服务条款</dd>
							<dd>帮助中心</dd>
							<dd>编辑器语法</dd>
						</dl>
						<dl>
							<dt>常用链接</dt>
							<dd>传智播客</dd>
							<dd>传智论坛</dd>
						</dl>
						<dl>
							<dt>联系我们</dt>
							<dd>联系我们</dd>
							<dd>加入我们</dd>
							<dd>建议反馈</dd>
						</dl>
						<dl>
							<dt>关注我们</dt>
							<dd>微博</dd>
							<dd>twitter</dd>
						</dl>

						<div class="xuke">
							<h3>内容许可</h3>
							<p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p>
							<p>本站由 传智研究院 提供更新服务</p>
						</div>
					</div>

					<p class="Copyright">Copyright © 2017 传智问答社区 当前版本 0.0.1</p>
				</div>
			</div>

		</div>

		<script>
			// $(function(){
			//   $(".hover").hover(function(){
			//     $(".hoverinfo").stop().animate({
			//        opacity: "show"
			//     },"slow");
			//     $(this).find(".fa-plus").css("color","#e64620");
			//   },function(){
			//     $(".hoverinfo").stop().animate({
			//        opacity: "hide"
			//     },"slow");
			//     $(this).find(".fa-plus").css("color","#000");
			//   })
			// })

			// $(document).ready(function () {
			//     /*
			//      左侧 接收别人信息 调用，三个参数：leftBubble，头像路径，内容
			//      chat(element,imgSrc,doctextContent)
			//      */
			//     chat("leftBubble", "./../img/widget-photo.png", "您好，请问有什么需要沟通的吗？");
			//     $(".send-btn").click(function () {
			//         //右侧 自己发 调用，只需填一个参数"rightBubble"
			//         chat("rightBubble");
			//         //清空输入框
			//         $('.chat-info').html('');
			//     })
			// })

			$(function() {
				$(".close").click(function() {
					$(this).parent('p').css('display', "none")
				})
			})
		</script>
	</body>